<template>
    <div>
        <div class="container">
            <div class="top">
                <el-date-picker
                    value-format="timestamp"
                    v-model="data"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-input placeholder="请输入店铺ID" v-model="input" style="width: 250px">
                    <template slot="prepend">店铺ID:</template>
                </el-input>
                 <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
                
            </div>
        
            <el-table
                v-loading="loading"
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column label="店铺名称">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.reviewInfo[0].status">{{scope.row.reviewInfo[0].reviewerColumn}}</el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="wifi名称" >
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.reviewInfo[1].status">{{scope.row.reviewInfo[1].reviewerColumn}}</el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="logo图片" >
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.reviewInfo[2].status">
                            <el-image
                                class="table-td-logo"
                                :src="scope.row.reviewInfo[2].reviewerColumn"
                                :preview-src-list="[scope.row.reviewInfo[2].reviewerColumn]"
                            ></el-image>
                        </el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="营销图片" >
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.reviewInfo[3].status">
                            <el-image
                                class="table-td-logo"
                                :src="scope.row.reviewInfo[3].reviewerColumn"
                                :preview-src-list="[scope.row.reviewInfo[3].reviewerColumn]"
                            ></el-image>
                        </el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="批注" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.reviewerContent" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>

                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <el-button
                        v-if="scope.row.reviewStatus == 2"
                            type="danger"
                        >审核失败</el-button>
                        <el-button
                        v-if="scope.row.reviewStatus == 3"
                            type="success"
                        >审核成功</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="50"
                layout=" prev, pager, next"
                :total="total"
               >
            </el-pagination>
        </div>
        
    </div>
</template>

<script>
export default {
    name: 'onlineManagement',
    data() {
        return {
            options: [
            {
                value: false,
                label: '审核失败'
            }, {
                value: true,
                label: '审核成功'
            }],
            value: '',
            input:'',
            data: [new Date(new Date(new Date().toLocaleDateString()).getTime()),new Date(new Date(new Date().toLocaleDateString()).getTime())],
            tableData: [],
            loading: false,
            form: {},
            currentPage:1,
            total: 0
            
        };
    },
    created() {
        this.getData();
    },
    methods: {
        handleCurrentChange(val) {
            this.currentPage = val
            this.getData();
        },
        getData() {
            this.loading = true;
            const u = '/weChatWifiLogin/shopInfo/queryRecordInfo?shopId='+this.input+'&startDate='+this.data[0]/1000+'&endDate='+(this.data[1]/1000+86400)+'&status='+this.value+'&pageSize=20&pageNum='+this.currentPage;
            this.$axios.get(u,{headers:{'token': localStorage.getItem('manage_wifi_token')}})
            .then((res)=>{
                this.loading = false;
                if(res.data.code == 200){
                    this.tableData = res.data.data.reviewRecordInfoDtoList;
                    this.total = res.data.data.total;
                }else{
                    this.$message.error(res.data.msg);
                };
            }).catch((err)=>{
                console.log(err);
            
            });
        },
    }
};
</script>

<style scoped lang="less">
.table {
    width: 100%;
    font-size: 14px;
    margin-top: 10px;
}
.pagination {
    margin: 20px 0;
    text-align: right;
}

.table-td-logo {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
